<template>
  <div style="display: flex; justify-content: space-around; height: 555px">
    <div ref="main" style="width: 50%; height: 100%"></div>
    <div ref="user" style="width: 45%; height: 90%;padding: 70px 0 0 0;"></div>
  </div>
</template>
<style></style>
<script>
import * as echarts from "echarts";

export default {
  name: "MyChartComponent",
  data() {
    return {
      dianzu: 0,
      dianrong: 0,
      xinpian: 0,
      paizu: 0,
      jingzheng: 0,
      jack: 0,
      ryc: 0,
      tcx: 0,
      cdd: 0,
      ym: 0,
      cyh: 0,
      chartInstance: null,
      chart2Instance: null,
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    // 在数据获取完成后再初始化图表
    this.$nextTick(() => {
      if (this.chartInstance === null) {
        this.chartInstance = echarts.init(this.$refs.main);
      }
      if (this.chart2Instance === null) {
        this.chart2Instance = echarts.init(this.$refs.user);
      }
    });
  },
  methods: {
    fetchData() {
      // 使用 Promise.all 确保所有请求完成后再初始化图表
      const promises = [
        this.$axios.get("http://localhost:8085/selectbyName?name=电阻"),
        this.$axios.get("http://localhost:8085/selectbyName?name=74系列芯片"),
        this.$axios.get("http://localhost:8085/selectbyName?name=电容"),
        this.$axios.get("http://localhost:8085/selectbyName?name=排阻"),
        this.$axios.get("http://localhost:8085/selectbyName?name=晶振"),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=jack"
        ),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=ryc"
        ),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=tcx"
        ),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=ym"
        ),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=cyh"
        ),
        this.$axios.get(
          "http://localhost:8085/selectlendByUsername?username=cdd"
        ),
      ];

      Promise.all(promises)
        .then((responses) => {
          responses.forEach((response, index) => {
            switch (index) {
              case 0:
                this.dianzu = response.data.length;
                break;
              case 1:
                this.xinpian = response.data.length;
                break;
              case 2:
                this.dianrong = response.data.length;
                break;
              case 3:
                this.paizu = response.data.length;
                break;
              case 4:
                this.jingzheng = response.data.length;
                break;
              case 5:
                this.jack = response.data.length;
                break;
              case 6:
                this.ryc = response.data.length;
                break;
              case 7:
                this.tcx = response.data.length;
                break;
              case 8:
                this.ym = response.data.length;
                break;
              case 9:
                this.cyh = response.data.length;
                break;
              case 10:
                this.cdd = response.data.length;
                break;
            }
          });
          this.initChart(); // 数据全部获取完毕后初始化图表
          this.initChart2(); // 数据全部获取完毕后初始化图表
        })
        .catch((error) => {
          console.error("Error fetching data: ", error);
        });
    },
    initChart() {
      if (this.chartInstance === null) {
        this.chartInstance = echarts.init(this.$refs.main);
      }
      this.chartInstance.setOption({
        xAxis: {
          type: "category",
          data: ["电阻", "电容", "74系列芯片", "排阻", "晶振"],
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            data: [
              this.dianzu,
              this.dianrong,
              this.xinpian,
              this.paizu,
              this.jingzheng,
            ],
            type: "bar",
          },
        ],
      });
    },
    initChart2() {
      if (this.chart2Instance === null) {
        this.chart2Instance = echarts.init(this.$refs.user);
      }
      this.chart2Instance.setOption({
        title: {
          text: "用户租借统计",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "用户租借统计",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.jack, name: "jack" },
              { value: this.cdd, name: "cdd" },
              { value: this.ym, name: "ym" },
              { value: this.ryc, name: "ryc" },
              { value: this.tcx, name: "tcx" },
              { value: this.cyh, name: "cyh" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
  unmounted() {
    if (this.chartInstance !== null) {
      this.chartInstance.dispose();
    }
    if (this.chart2Instance !== null) {
      this.chart2Instance.dispose();
    }
  },
};
</script>
